<template>
  <div>
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @input="onInput"
      @cancel="onCancel"
    />
    <template v-if="list.length > 0">
      <van-cell-group v-for="(item, index) in list" :key="index">
        <van-cell :title="item.communityName" @click="toPush(item)" />
      </van-cell-group>
    </template>
  </div>
</template>

<script>
import { areaCommunityAPI } from "@/api";
export default {
  data() {
    return {
      value: "",
      timer: null,
      list: [],
    };
  },
  methods: {
    async onInput() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      clearTimeout(this.timer);
      this.timer = setTimeout(async () => {
        let params = { name: this.value, id: this.$store.state.id };
        const res = await areaCommunityAPI(params);
        console.log(999, res);
        this.list = res.data.body;
        this.$toast.success("加载成功");
      }, 500);
    },
    toPush(item) {
      console.log(item);
      this.$router.push({
        path: "/rend",
        query: {
          community: item.community,
          communityName: item.communityName,
        },
      });
    },
    onCancel() {
      this.$router.push({
        path: "/rend",
        query: {
          community: "",
          communityName: "",
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
:deep(.van-search) {
  height: 80px;
  .van-search__content {
    height: 60px;
  }
}
</style>
